<template>
    <div id="orderConfirm">
        <img class="back" src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <div class="content">
                  <h1>确认订单</h1>
                  <div class="title">
                        <img src="../../assets/test.jpg" alt="">
                        <section>
                            <!-- -->
                            <p style="flex:1">{{orderData.serverName}}</p>
                            <div>{{orderData.amount}}￥<p>{{orderData.specName}}<span>x</span>{{orderData.quantity}}</p></div>
                        </section>
                  </div>
                  <div class="address">
                      <img src="../../assets/task/map.png" alt="">
                      <section>
                        <p style="flex:1;font-size:0.8rem;">收货地址</p>
                        <div>
                            {{userData.schoolName}} <p>{{dormRoom}}</p>
                            <img @click="alterAddress()" src="../../assets/task/next.png" alt="">
                        </div>
                      </section>
                  </div>
                  <div class="receiver">
                      <img src="../../assets/task/unlimited.png" alt="">
                      <section>
                        <p style="flex:1;font-size:0.8rem;">收货人</p>
                        <div>
                           <p> {{userData.realName}}<span>&nbsp（喵喵）</span></p><p style="margin-left:1.5rem;">{{userData.phoneNumber}}</p>
                        </div>
                      </section>
                  </div>
        </div>
        <div class="clearBtn">
            <p>总计<span>{{orderData.amount}}￥</span></p>
            <p @click="payOff()">确定支付</p>
        </div>
        <!--修改地址弹出框-->
        <div id="alterWindow" v-show="alterWindow">
        </div>
        <div id="showLayer" v-show="showLayer">
            <p class="alterAdr">编辑地址
                <img @click="closeDiv()" src="../../assets/task/chanel.png" alt="">
            </p>
            <select v-model="userData.schoolName" class="selSchool">
                <option value="福州大学">福州大学</option>
                <option value="福建工程学院">福建工程学院</option>
                <option value="福建师范大学协和学院">福建师范大学协和学院</option>
            </select>
            <input class="inputAdr" placeholder="请输入详细地址" type="text" v-model="dormRoom">

             <p class="receiverInfo">收货人</p>
            <section class="receiverName">
                <input v-model="userData.realName" placeholder="收货人" type="text">
                <input v-model="userData.phoneNumber" placeholder="收货人联系方式" type="text">
            </section>
            <section class="receiverSex">
                <el-radio v-model="radio" label="1">男生</el-radio>
                <el-radio v-model="radio" label="2">女生</el-radio>
            </section>
            <p class="receiverConfirm" @click="config">确定</p>
        </div>
        <!--支付密码弹出框-->
        <div id="payWindow" v-show="payWindow">
        </div>
        <div id="payLayer" v-show="payLayer">
           <p class="inputPsw">
                请输入四位交易密码
                <img @click="closePay()"  src="../../assets/task/chanelB.png" alt="">
            </p>
            <section class="psw">
                <input ref="input1" v-model="iput1" maxlength="1" v-focus type="text">
                <input ref="input2" v-model="iput2" maxlength="1" type="text">
                <input ref="input3" v-model="iput3" maxlength="1" type="text">
                <input ref="input4" v-model="iput4" maxlength="1" type="text">
            </section>
            <p class="pay"  @click="confirmSure">确定</p>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
        radio: '1',
        alterWindow:false,
        showLayer:false,
        payWindow:false,
        payLayer:false,
        iput1:'',
        iput2:'',
        iput3:'',
        iput4:'',
        orderData:{},
        dormRoom:'',
        userData:{},
        checkPsw:{
            password:undefined,
        },
    }
  },
  //监听密码失去焦点事件
  watch:{
      iput1: function (val) {
        if(val!=''){
          this.$refs.input1.blur();
          this.$refs.input2.focus();
        }
      },
      iput2: function (val) {
        if(val!=''){
          this.$refs.input2.blur();
          this.$refs.input3.focus();
        }
      },
      iput3: function (val) {
        if(val!=''){
          this.$refs.input3.blur();
          this.$refs.input4.focus();
        }
      },
      iput4: function (val) {
        if(val!=''){
          this.$refs.input4.blur();
        }
      }
    },
     directives: {
      focus: {
        // 自定义指令聚焦
        inserted: function (el) {
          el.focus()
        }
      }
    },
  mounted(){

  },
  created(){
        this.getTaskOrder();
        this.getTaskUser();
   },

  methods:{
        alterAddress(){
            this.alterWindow=true;
            this.showLayer=true;
        },
        payOff(){
            this.payWindow=true;
            this.payLayer=true;
        },
        config(){
            this.closeDiv()
            this.userData.schoolName=this.userData.schoolName
        },
        closeDiv() {
            this.alterWindow=false;
            this.showLayer=false;
        },
        closePay() {
            this.payWindow=false;
            this.payLayer=false;
        },
        //获取上一页的数据
        getTaskOrder(){
            this.orderData=this.$route.query.data;
        },
        //获取默认收货地址及收货人
        getTaskUser(){
           this.$api.currUser().then((res)=>{
              if(res.code == '000000'){
                  this.userData = res.data;
                  this.dormRoom = this.userData.buildingNo+'#'+this.userData.dormNo
              } 
          })
        },
        //校验密码
        confirmSure(){
            this.checkPsw.password = this.iput1+this.iput2+this.iput3+this.iput4
            this.$api.checkPayPsw(this.checkPsw).then((res)=>{
                if(res.code == '000000'){
                        this.$api.releaseOrder(this.orderData).then((res)=>{
                            if(res.code=='000000'){
                                this.$router.push({path:'/cueMsg'})
                            }
                        })
                }else{
                    return
                }
            })
      },
  }
}
</script>
<style>
#orderConfirm{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/task/tab.png)
}
#orderConfirm .back{
    height:0.85rem;
    width:0.5rem;
    margin:1rem 0.6rem;
}
#orderConfirm .content{
    margin:1.5rem auto;
    width:80%;
}
#orderConfirm .content h1{
    width:100%;
    text-align:center;
    height:2.5rem;
    line-height:2.5rem;
}
#orderConfirm .content .title{
    margin-top:1rem;
    display:flex;
    justify-content:space-between;
}
#orderConfirm .content .title > img{
    width:5rem;
    height:5rem;
}
#orderConfirm .content .title > section{
    height:5rem;
    width:80%;
    display:flex;
    flex-direction:column;
    margin-left:0.75rem;
}
#orderConfirm .content .title > section >div{
    display:flex;
    justify-content:space-between;
    font-size:0.9rem;
}
#orderConfirm .content .address{
    display:flex;
    justify-content:space-between;
    margin-top:2.5rem;
}
#orderConfirm .content .address > img{
    width:1.1rem;
    height:1.25rem;
}
#orderConfirm .content .address > section{
    height:3rem;
    width:90%;
    display:flex;
    flex-direction:column;
    margin-left:0.75rem;
}
#orderConfirm .content .address > section > div{
    display:flex;
    justify-content:space-between;
    font-size:0.8rem;
}
#orderConfirm .content .address > section > div > img {
    width:0.5rem;
    height:0.85rem;
    margin-top:-0.5rem;
}
#orderConfirm .content .receiver{
    display:flex;
    justify-content:space-between;
    margin-top:1.5rem;
}
#orderConfirm .content .receiver > img{
    width:1.25rem;
    height:1.1rem;
}
#orderConfirm .content .receiver > section{
    height:3rem;
    width:90%;
    display:flex;
    flex-direction:column;
    margin-left:0.6rem;
}
#orderConfirm .content .receiver > section >div {
    display:flex;
    font-size:0.8rem;
}
#orderConfirm .clearBtn{
    width:100%;
    position:absolute;
    bottom:0px;
    display:flex;
    height:2.5rem;
    line-height:2.5rem;
    text-align:center;
}
#orderConfirm .clearBtn > p:nth-child(1){
    background:#fff;
    width:50%;
    color:#29a193;
}
#orderConfirm .clearBtn > p:nth-child(2){
    background:#29a193;
    width:50%;
    color:#ffffff;
}
#orderConfirm #alterWindow,#payWindow{
    background-color:#4c4c4c;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 1;
    position: absolute;
}
#orderConfirm  #showLayer {
    width: 84%;
    background:#ffffff;
    left: 8%;
    top: 25%;
    color:#000;
    z-index: 2;
    color:#8a8a8a;
    font-size:0.8rem;
    padding:0.8rem;
    position: absolute;
}
#orderConfirm  #showLayer .alterAdr{
    width:100%;
    height:2.5rem;
    line-height:3rem;
    border-bottom:1px solid #8a8a8a;
    font-size:0.8rem;
    font-weight:bold;
}
#orderConfirm  #showLayer .alterAdr > img{
    width:1rem;
    height:10x;
    float:right;
    margin-top:1rem;
}
#orderConfirm  #showLayer .selSchool{
    width:80%;
    height:2.5rem;
    line-height:3rem;
    border-bottom:1px solid #8a8a8a;
}
#orderConfirm  #showLayer .inputAdr{
    width:80%;
    height:2.5rem;
    border-bottom:1px solid #8a8a8a;
}
#orderConfirm  #showLayer .receiverInfo{
    height:2.5rem;
    margin-top:0.75rem;
    line-height:3rem;
    border-bottom:1px solid #8a8a8a;
    font-size:0.8rem;
    font-weight:bold;
}
#orderConfirm  #showLayer .receiverName{
    margin-top:0.75rem;
    display:flex;
    justify-content:space-between;
}
#orderConfirm  #showLayer .receiverName input:nth-child(1){
    width:30%;
    height:1.5rem;
    border-bottom:1px solid #8a8a8a;
}
#orderConfirm  #showLayer .receiverName input:nth-child(2){
    width:50%;
    height:1.5rem;
    border-bottom:1px solid #8a8a8a;
}
#orderConfirm  #showLayer .receiverSex{
    margin-top:0.5rem;
    height:2.5rem;
    line-height:3rem;
}
#orderConfirm  #showLayer .receiverConfirm{
    width:90%;
    text-align:center;
    background:#29a193;
    color:#FFFFFF;
    font-size:0.9rem;
    letter-spacing:0.25rem;
    margin-left:0.75rem;
    margin-top:0.5rem;
    height:2.5rem;
    line-height:2.5rem;
}
#orderConfirm  #payLayer {
    width: 84%;
    background:#ffffff;
    left: 8%;
    top: 30%;
    color:#000;
    padding:1rem;
    z-index: 2;
    color:#8a8a8a;
    font-size:0.8rem;

    border-radius:13px;
    position: absolute;
}
#orderConfirm #payLayer .inputPsw{
    width:80%;
    height:2.25rem;
    margin:auto;
    line-height:3.5rem;
    font-size:1rem;
    text-align:center;
    font-weight:bold;
}
#orderConfirm #payLayer .inputPsw > img{
    width:1rem;
    float:right;
    margin-top:1.25rem;
}
#orderConfirm #payLayer .psw{
    margin:2.5rem auto;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
}
#orderConfirm #payLayer .psw > input{
    height:3.5rem;
    width:3.5rem;
    text-align:center;
    border:1px solid #8a8a8a;
}
#orderConfirm #payLayer .pay{
    width:50%;
    background:#29a193;
    margin:1rem auto;
    text-align:center;
    height:3rem;
    line-height:3rem;
    color:#fff;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
    border-radius:13px;
}
</style>

